import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import '../../brick/widget/image_widget.dart';
import '../../fluttergromore/config/app_const.dart';
import '../../fluttergromore/usersp/user_sp.dart';
import '../../fluttergromore/utils/device_package_info.dart';
import '../../routes/app_pages.dart';
import 'mine_logic.dart';

class MinePage extends GetView<VCMineLogic> {
  const MinePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: Column(
        children: [
          // 头部区域
          _buildHeader(),
          
          // 内容区域
          Expanded(
            child: Container(
              width: double.infinity,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                  topRight: Radius.circular(20),
                ),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x1A000000),
                    blurRadius: 10,
                    offset: Offset(0, -2),
                  ),
                ],
              ),
              child: SingleChildScrollView(
                padding: EdgeInsets.all(20.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 20.h),
                    
                    // 卡片列表
                    _buildCardList(),
                    
                    SizedBox(height: 40.h),
                    
                    // 版本信息
                    _buildVersionInfo(),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      width: double.infinity,
      height: 200.h,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF4A6EE0),
            Color(0xFF6A11CB),
          ],
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.h),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '我的账户',
                style: TextStyle(
                  fontSize: 20.sp,
                  fontWeight: FontWeight.w900,
                  color: Colors.white,
                  height: 1.15,
                ),
              ),
              SizedBox(height: 8.h),
              Opacity(
                opacity: 0.9,
                child: Text(
                  '管理您的账户和设置',
                  style: TextStyle(
                    fontSize: 13.sp,
                    color: Colors.white,
                    height: 1.15,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildCardList() {
    final cards = [
      {
        'icon': 'assets/images/icon_privacy.svg',
        'title': '隐私政策',
        'description': '查看我们的隐私保护政策',
        'onTap': () {
          Get.toNamed(Routes.webView, arguments: {
            'webUrl': AppConst.policyUrl,
            'title': '隐私政策'
          });
        },
      },
      {
        'icon': 'assets/images/icon_agreement.svg',
        'title': '用户协议',
        'description': '查看服务条款和使用协议',
        'onTap': () {
          Get.toNamed(Routes.webView, arguments: {
            'webUrl': AppConst.serviceUrl,
            'title': '用户协议'
          });
        },
      },
      {
        'icon': 'assets/images/icon_feedback.svg',
        'title': '用户反馈',
        'description': '向我们提出建议或报告问题',
        'onTap': () {
          Get.toNamed(Routes.feedback);
        },
      },
    ];

    return Column(
      children: cards.map((card) => _buildCard(
        iconPath: card['icon'] as String,
        title: card['title'] as String,
        description: card['description'] as String,
        onTap: card['onTap'] as VoidCallback,
      )).toList(),
    );
  }

  Widget _buildCard({
    required String iconPath,
    required String title,
    required String description,
    required VoidCallback onTap,
  }) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.only(bottom: 16.h),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: const Color(0xFFF8F9FF),
        border: Border.all(
          color: Colors.transparent,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(12.r),
        child: Row(
          children: [
            // 图标容器
            Container(
              width: 40.w,
              height: 40.w,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Color(0xFF4A6EE0),
                    Color(0xFF6A11CB),
                  ],
                ),
                borderRadius: BorderRadius.circular(10.r),
              ),
              child: Center(
                child: SvgPicture.asset(
                  iconPath,
                  width: 20.w,
                  height: 20.w,
                  colorFilter: const ColorFilter.mode(
                    Colors.white,
                    BlendMode.srcIn,
                  ),
                ),
              ),
            ),
            SizedBox(width: 16.w),
            
            // 内容区域
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w900,
                      color: const Color(0xFF333333),
                    ),
                  ),
                  SizedBox(height: 4.h),
                  Text(
                    description,
                    style: TextStyle(
                      fontSize: 13.sp,
                      color: const Color(0xFF666666),
                      height: 1.15,
                    ),
                  ),
                ],
              ),
            ),
            
            // 箭头图标
            SvgPicture.asset(
              'assets/images/arrow_right_icon.svg',
              width: 16.w,
              height: 24.w,
              colorFilter: const ColorFilter.mode(
                Color(0xFF666666),
                BlendMode.srcIn,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildVersionInfo() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 8,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: UIImage(
              image: Image.asset(AppConst.appLogo),
              width: 64,
              height: 64,
            ),
          ),
        ),
        const SizedBox(width: 16),
        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FutureBuilder(
              future: DevicePackageInfo.instance.getAppName,
              builder: (context, data) {
                return Text(
                  data.data ?? "",
                  style: TextStyle(
                    fontSize: 20.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.black87,
                  ),
                );
              },
            ),
            const SizedBox(height: 4),
            FutureBuilder(
              future: DevicePackageInfo.instance.getAppVersion(),
              builder: (context, data) {
                return Text(
                  "版本 v${data.data ?? ""}",
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Colors.grey[600],
                  ),
                );
              },
            ),
            // 设备ID
            FutureBuilder(
              future: UserSp.instance.getDjid(),
              builder: (context, data) {
                return Text(
                  data.data ?? "",
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: Colors.grey[600],
                    fontFamily: 'monospace',
                  ),
                );
              },
            ),
          ],
        ),
      ],
    );
  }
}
